<template>
  <el-form label-width="80px">
    <el-form-item label="SKU名称">
      <el-input
        placeholder="请你输入SKU的名称"
        v-model="skuParams.skuName"
      ></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input
        placeholder="请你输入SKU的价格"
        type="number"
        v-model="skuParams.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(g)">
      <el-input
        placeholder="请你输入SKU的重量"
        type="number"
        v-model="skuParams.weight"
      ></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input
        placeholder="请你输入SKU的描述"
        type="textarea"
        v-model="skuParams.skuDesc"
      ></el-input>
    </el-form-item>
    <!-- el-form->el-form-item->el-form -->
    <el-form-item label="平台属性">
      <!-- 代表行内表单:一行里面可以放置多个表单 -->
      <el-form :inline="true" label-width="70px">
        <el-form-item
          :label="attr.attrName"
          v-for="(attr, index) in attrArr"
          :key="attr.id"
        >
          <el-select v-model="attr.attrIdAndValueId">
            <el-option
              :label="item.valueName"
              :value="`${attr.id}:${item.id}`"
              v-for="(item, index) in attr.attrValueList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <!-- 代表行内表单:一行里面可以放置多个表单 -->
      <el-form :inline="true">
        <el-form-item
          :label="sale.saleAttrName"
          v-for="(sale, index) in saleArr"
          :key="sale.id"
        >
          <el-select v-model="sale.saleIdAndValueId">
            <el-option
              :label="item.saleAttrValueName"
              :value="`${sale.id}:${item.id}`"
              v-for="(item, index) in sale.spuSaleAttrValueList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="SKU图片">
      <el-table border :data="imgArr" ref="table">
        <el-table-column type="selection" width="80"></el-table-column>
        <el-table-column label="图片">
          <template #="{ row, $Index }">
            <img :src="row.imgUrl" alt="" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $Index }">
            <el-button type="primary" v-if="row.flag">默认图片</el-button>
            <el-button type="warning" v-else @click="changeFlag(row)"
              >设置默认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default" @click="save">保存</el-button>
      <el-button size="default" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { nextTick, reactive, ref } from "vue";
import {
  reqAttrList,
  reqSpuSaleAttrList,
  reqSpuImageList,
  reqAddSku,
} from "../../../api/product/spu/index";

//添加SKU需要收集的参数:参数字段参考swagger文档
let skuParams = reactive({
  //父组件给的数据:可以收集到
  category3Id: 0, //三级分类的ID
  spuId: 0, //spu的ID
  tmId: 0, //品牌数据

  //v-model：数据双向绑定就可以收集到
  skuName: "", //sku名字的收集
  price: 0, //sku价格
  weight: "", //sku重量
  skuDesc: "", //sku描述

  skuAttrValueList: [
    //平台属性
    // {
    //   "attrId": 0, //平台属性的ID
    //   "valueId": 0,//属性值的ID
    // }
  ],
  skuSaleAttrValueList: [
    //销售属性
    // {
    //   "saleAttrId": 0,//销售属性的ID
    //   "saleAttrValueId": 0,//销售属性值的ID
    // }
  ],
  skuDefaultImg: "", //sku默认图片的地址收集
});

let emit = defineEmits(["changeScene"]);
const cancel = () => {
  //触发自定义事件:儿子->父组件通信,自定义事件，通知父亲切换场景
  emit("changeScene", { val: 0, flag: "update" });
};

//存储SPU已经拥有的平台属性|销售属性|照片墙的数据
let attrArr = ref([]);
let saleArr = ref([]);
let imgArr = ref([]);

let table = ref();

//skuForm子组件的方法:将来父组件需要获取到,父组件每一次点击添加SKU按钮，调用这个方法(发三个请求)
const initAddSku = async (c1Id, c2Id, spu) => {
  Object.assign(skuParams, {
    //父组件给的数据:可以收集到
    category3Id: 0, //三级分类的ID
    spuId: 0, //spu的ID
    tmId: 0, //品牌数据

    //v-model：数据双向绑定就可以收集到
    skuName: "", //sku名字的收集
    price: 0, //sku价格
    weight: "", //sku重量
    skuDesc: "", //sku描述

    skuAttrValueList: [
      //平台属性
      // {
      //   "attrId": 0, //平台属性的ID
      //   "valueId": 0,//属性值的ID
      // }
    ],
    skuSaleAttrValueList: [
      //销售属性
      // {
      //   "saleAttrId": 0,//销售属性的ID
      //   "saleAttrValueId": 0,//销售属性值的ID
      // }
    ],
    skuDefaultImg: "", //sku默认图片的地址收集
  });
  //收集父组件传递过来的：三级分类ID、SPU的ID、tmID
  skuParams.category3Id = spu.category3Id;
  skuParams.spuId = spu.id;
  skuParams.tmId = spu.tmId;
  //获取全部平台属性与属性值
  let result = await reqAttrList(c1Id, c2Id, spu.category3Id);
  //获取当前追加SKU的spu的已有的销售属性与属性值
  let result1 = await reqSpuSaleAttrList(spu.id);
  //获取SPU全部照片墙的数据，作为这个SKU的售卖图片
  let result2 = await reqSpuImageList(spu.id);
  //存储相应的数据去展示
  attrArr.value = result;
  saleArr.value = result1;
  imgArr.value = result2.map((item) => {
    return {
      ...item,
      flag: false,
    };
  });
  imgArr.value[0].flag = true;
  nextTick(() => {
    table.value.toggleRowSelection(imgArr.value[0], true);
  });
};
//点击设置默认的回调
const changeFlag = (row: any) => {
  imgArr.value.forEach((item) => {
    item.flag = false;
    //排他的时候:全部图片复选框先全不勾选
    table.value.toggleRowSelection(item, false);
  });
  row.flag = true;
  //排他的时候:选中的图片复选框先勾选
  table.value.toggleRowSelection(row, true);
  //收集携带给服务器默认图片地址
  skuParams.skuDefaultImg = row.imgUrl;
};
const save = async () => {
  skuParams.skuAttrValueList = attrArr.value.reduce((prev, next) => {
    if (next.attrIdAndValueId) {
      const [attrId, valueId] = next.attrIdAndValueId.split(":");
      prev.push({ attrId, valueId });
    }
    return prev;
  }, []);
  skuParams.skuSaleAttrValueList = saleArr.value.reduce((prev, next) => {
    if (next.saleIdAndValueId) {
      const [saleAttrId, saleAttrValueId] = next.saleIdAndValueId.split(":");
      prev.push({ saleAttrId, saleAttrValueId });
    }
    return prev;
  }, []);
  try {
    await reqAddSku(skuParams);
    ElMessage.success("添加SKU成功");
    emit("changeScene", { val: 0, flag: "update" });
  } catch (e) {
    ElMessage.error("添加SKU失败");
  }
};

defineExpose({ initAddSku });
</script>

<style scoped>
</style>